<!-- 员工管理 -->
<template>
  <div class="container-body organization-manage">
    <div class="page-containerstwo">
      <div class="newleft" :style="{ width: isExpanded ? `${maxWidth}px` : '0px' }">
        <div class="leftview" v-show="isExpanded">
          <div class="zhanitem">
            <div class="xun" v-for="(item, index) in list" :key="index">
              <div class="pone" @click.stop="getindex(index)">
                <img src="../../assets/img/icon_ps.png" alt="" class="icon_ps" />
                <span class="painame">{{ item.name }}</span>
                <div class="rpai">
                  <img src="../../assets/img/icon_zk_s.png" v-if="item.iszhe" alt="" class="icon_px" />
                  <img src="../../assets/img/icon_zk_s.png" style="transform: rotate(180deg);" v-if="!item.iszhe" alt="" class="icon_px" />
                </div>
              </div>
              <div class="paisheitem" v-if="item.iszhe" v-for="(i, ind) in item.items" :key="ind" @click="getvdeonum(i)">
                <div class="sheleft" v-if="i.type == 'RTMP'">
                  <img src="../../assets/img/live.png" alt="" class="tuimg" />
                  <div class="good">
                    <span class="xing"></span>
                    <span class="goodname">{{ $t('message.lang36') }}</span>
                  </div>
                </div>
                <div class="sheleft" v-else-if="i.type == 'VIDEO'">
                  <img :src="i.videoUrl ? i.videoUrl + '?x-oss-process=video/snapshot,t_1,m_fast' : ''" alt="" class="tuimg" />
                  <div class="good">
                    <span class="xing"></span>
                    <span class="goodname">Good</span>
                  </div>
                </div>
                <div class="sheright">
                  <span class="shename txt">{{ i.name }}</span>
                  <div class="shiview">
                    <img src="../../assets/img/icon_sj.png" alt="" class="icon_sj" />
                    <span class="times">{{ i.videoFileSize }}</span>
                    <img style="margin-left: 8px;" src="../../assets/img/icon_rq.png" alt="" class="icon_sj" />
                    <span class="times">{{ i.createTime }}</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <img src="../../assets/img/img_sq_n2.png" alt="" v-if="isExpanded" @click="toggleExpand" class="qies" />
        <img src="../../assets/img/img_sq_s2.png" alt="" v-if="!isExpanded" @click="toggleExpand" class="qies" />
      </div>

      <div class="rightview center-col" v-if="islei == 3">
        <div class="xmwj" style="height: 48px;">
          <span class="xname" v-if="vtype == 'VIDEO'">{{ vitem.name ? vitem.name : $t('message.lang37') }}</span>
          <span class="xname" v-if="vtype == 'RTMP'">{{ newvitem.name ? newvitem.name : $t('message.lang37') }}</span>
          <div class="xmright" v-if="vitem.videoUrl">
            <div class="schaun" @click="getdown">{{ $t('message.lang38') }}</div>
          </div>

          <el-button v-if="item.videoUrl" style="position: absolute;right:130px" type="primary" @click="createShare">{{ $t('message.createShare') }}</el-button>
        </div>
        <div class="wenview">
          <div class="wenviewitems" v-if="vtype == 'VIDEO'">
            <div class="kong" v-if="vitem.videoUrl == ''">
              <div class="kongitem"></div>
              <div class="kongnav">
                <img src="../../assets/img/live.png" alt="" class="live" />
                <span class="novideo">{{ $t('message.lang39') }}</span>
              </div>
            </div>
            <video v-else controls class="videoview" :poster="vitem.videoUrl + '?x-oss-process=video/snapshot,t_1,m_fast'" :src="vitem.videoUrl" />
          </div>
          <div class="wenviewitems" v-if="vtype == 'RTMP'">
            <div class="kong" v-if="newvitem.videoUrl == ''">
              <div class="kongitem"></div>
              <div class="kongnav">
                <img src="../../assets/img/live.png" alt="" class="live" />
                <span class="novideo">{{ $t('message.lang40') }}</span>
              </div>
            </div>
            <video v-else ref="video" controls class="videoview" :poster="newvitem.videoUrl + '?x-oss-process=video/snapshot,t_1,m_fast'" :src="newvitem.videoUrl" />
          </div>

          <!-- <video v-else-if="vtype=='VIDEO'"  controls class="videoview" :poster="vitem.videoUrl+'?x-oss-process=video/snapshot,t_1,m_fast'" :src="vitem.videoUrl"  />
          <video v-else-if="vtype=='RTMP'" ref="video" controls class="videoview" :poster="newvitem.videoUrl+'?x-oss-process=video/snapshot,t_1,m_fast'" :src="newvitem.videoUrl"  /> -->
        </div>
      </div>

      <!-- 右侧 -->
      <div class="newleft" :style="{ width: isExpandedRight ? `${maxWidth}px` : '0px' }">
        <div class="leftview" v-show="isExpandedRight">
          <div class="rone">
            <span class="gbiao">{{ $t('message.lang41') }}</span>
            <el-input type="text" v-model="vitem.name" auto-complete="off" :placeholder="$t('message.lang8')"></el-input>
            <span class="gbiao"></span>
            <el-button style="width: 100%;" @click="updateName(vitem)" type="primary">{{ $t('message.lang42') }}</el-button>
            <el-upload class="avatar-uploader" :before-upload="beforeAvatarUpload">
              <img v-if="imageUrl" :src="imageUrl" class="avatar" />
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
            <div class="gaishu">
              <span class="gbiao">{{ $t('message.lang43') }}</span>
              <div class="gaiitem">
                <span class="gname">{{ $t('message.lang44') }}</span>
                <span class="gnval ml">{{ vitem.videoFileSize }}MB</span>
              </div>
              <div class="gaiitem">
                <span class="gname">{{ $t('message.lang45') }}</span>
                <span class="gnval ml">{{ vitem.videoFileType }}</span>
              </div>
              <div class="gaiitem">
                <span class="gname">{{ $t('message.lang46') }}</span>
                <span class="gnval ml">{{ vitem.createTime }}</span>
              </div>
            </div>
          </div>
        </div>
        <img src="../../assets/img/img_sq_n.png" alt="" v-if="isExpandedRight" @click="toggleExpandRight" class="qiesright" />
        <img src="../../assets/img/img_sq_s.png" alt="" v-if="!isExpandedRight" @click="toggleExpandRight" class="qiesright" />
      </div>
    </div>
  </div>
</template>

<script>
import { SystemMangeAPI } from '@/api/SystemMange';
import { baseAPI } from '@/api/base';
import Hls from 'hls.js';

export default {
  name: 'OperationLog',
  components: {},
  data() {
    return {
      treeTitle: '组织架构',
      isshuju: false,
      paishedialogVisible: false, //拍摄项目
      name: '',
      value2: false,
      checkList: [this.$t('message.Producer')],
      jiweidialogVisible: false,
      spydialogVisible: false, //视频源配置
      activeName: 'second',
      islei: 3, //我的拍摄 2参与的拍摄 3我的项目 4参与的项目
      isleftzhan: false,
      isExpanded: true, // 控制是否展开的标志
      maxWidth: 300, // 最大宽度，例如600px
      isExpandedRight: true,
      userData: { name: '张三', age: 30 }, // 示例数据
      // items: [
      // 	{ name: 'Item 1', content: '这是内容1' },
      // 	{ name: 'Item 2', content: '这是内容2' },
      // 	// 更多项...
      // ],
      items: [{ name: '项目1' }, { name: '项目2' }, { name: '项目3' }],
      popovers: [false, false, false],
      activeIndex: null, // 当前激活的 popover 索引
      video: '',
      videoId: '',
      list: [],
      vitem: {
        ID: 0,
        videoUrl: '',
        name: '',
        videoFileSize: '',
        videoFileType: '',
        createTime: '',
      },
      newvitem: {
        videoUrl: '',
        name: '',
        ID: 0,
      },
      hls: null,
      vtype: 'VIDEO',
      item: {},
      imageUrl: '',
      // video:'https://task.tongtongz.top/uploads/20250414/895da4bafcb46e498abb8ad2eb305742.mp4'
    };
  },
  watch: {},
  computed: {
    containerStyle() {
      return {
        width: this.isExpanded ? `${this.maxWidth}px` : '0px', // 根据isExpanded的值动态设置宽度
      };
    },
  },
  created() {
    // 获取路由参数
    const id = this.$route.query.id;
    if (id) {
      this.videoId = id;
      console.log(this.videoId);
    }
    this.getlist();
  },
  onHide() {},
  beforeDestroy() {
    if (this.hls) {
      this.hls.destroy();
    }
  },
  beforeUnmount() {},
  methods: {
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg';
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }

      const formData = new FormData();
      formData.append('file', file);
      // 上传文件
      SystemMangeAPI.uploadFile(formData).then(({ oss_url }) => {
        this.imageUrl = oss_url.ossUrl;
      });
      return isJPG && isLt2M;
    },
    copyToClipboard(text) {
      navigator.clipboard
        .writeText(text)
        .then(() => {
          console.log('内容已复制:', text);
        })
        .catch(err => {
          console.error('复制失败:', err);
        });
    },
    // 分享
    createShare() {
      const data = {
        chrProjectId: Number(this.videoId),
        chrResourceId: this.item.chrResourceId,
        chrResourceItemId: this.item.ID,
      };

      SystemMangeAPI.CreateShareAPI(data).then(({ code, data }) => {
        if (code == 0) {
          this.$alert(
            `
            <div stytle="font-size:20px">
            链接: ${data.url}<br/>
            密码: ${data.password}<br/>
            有效期: 永久有效<br/>
            </div>
          `,
            '分享成功',
            {
              confirmButtonText: this.$t('message.confirm'),
              dangerouslyUseHTMLString: true,
              callback: () => {
                this.copyToClipboard(`链接: ${data.url}\n
                                      密码: ${data.password}\n
                                      有效期: 永久有效\n`);
              },
            }
          );
        }
      });
    },
    initPlayer() {
      const video = this.$refs.video;
      const videoSrc = this.src;

      if (Hls.isSupported()) {
        this.hls = new Hls();
        this.hls.loadSource(videoSrc);
        this.hls.attachMedia(video);
        this.hls.on(Hls.Events.MANIFEST_PARSED, () => {
          video.play();
        });
      } else if (video.canPlayType('application/vnd.apple.mpegurl')) {
        // Safari
        video.src = videoSrc;
        video.addEventListener('loadedmetadata', () => {
          video.play();
        });
      } else {
        console.error('当前浏览器不支持 HLS 播放');
      }
    },
    //更新切片名称
    updateName(item) {
      console.log(item.name);
      SystemMangeAPI.UpdateResourceItem({
        ID: item.ID,
        name: item.name,
        HEAD_IMG: this.imageUrl,
      }).then(res => {
        if (res.code == 0) {
          console.log(res);
        }
      });
    },
    getlist() {
      SystemMangeAPI.ListResourceItemByProject({
        projectId: this.videoId,
      }).then(res => {
        console.log(res);
        if (res.code == 0) {
          let parms = res.data.resouse;
          for (let i in parms) {
            if (i == 0) {
              parms[i].iszhe = true;
            } else {
              parms[i].iszhe = false;
            }
          }
          this.list = parms;
        }
      });
    },
    handleClose(e) {
      if (e == 1) {
        this.paishedialogVisible = false;
      } else if (e == 2) {
        this.jiweidialogVisible = false;
      } else if (e == 3) {
        this.spydialogVisible = false;
      }
    },
    getvdeonum(item) {
      console.log(item);
      this.item = item;
      this.vtype = item.type;
      if (item.type == 'RTMP') {
        SystemMangeAPI.generateHLS({
          resourceId: item.chrResourceId,
        }).then(res => {
          if (res.code == 0) {
            this.newvitem.videoUrl = 'https://video.skyzhou.cn' + res.data.hls;
            console.log(this.newvitem.videoUrl);
            this.newvitem.name = item.name || 'Live';
            const videoSrc = this.newvitem.videoUrl;
            const video = this.$refs.video;
            if (Hls.isSupported()) {
              this.hls = new Hls();
              this.hls.loadSource(videoSrc);
              this.hls.attachMedia(video);
              this.hls.on(Hls.Events.MANIFEST_PARSED, () => {
                video.play();
              });
            } else if (video.canPlayType('application/vnd.apple.mpegurl')) {
              // Safari
              video.src = videoSrc;
              video.addEventListener('loadedmetadata', () => {
                video.play();
              });
            } else {
              console.error('当前浏览器不支持 HLS 播放');
            }
          }
        });
      } else if (item.type == 'VIDEO') {
        this.vitem = item;
      }
    },
    handleClick(tab, event) {
      console.log(tab);
      console.log(this.activeName);
    },
    toggleExpand() {
      this.isExpanded = !this.isExpanded; // 切换展开状态
    },
    toggleExpandRight() {
      this.isExpandedRight = !this.isExpandedRight; // 切换展开状态
    },
    showPopover(data) {
      // 定义一个方法传递数据给弹窗内容
      this.$refs.popover.updatePopper(); // 确保弹窗内容更新，如果使用了v-slot:default接收数据的话，可能需要调用此方法或类似方法来触发更新。注意：Element UI的某些版本可能需要手动触发更新。具体方法可能需要根据Element UI的版本调整。例如，在某些情况下，你可能需要使用`this.$nextTick()`来确保DOM更新完成。
      // 或者在某些情况下，你可能需要手动触发更新：this.$refs.popover.doSomething(); // 根据实际情况调整方法名。例如：this.$refs.popover.$forceUpdate(); 或者其他适合的方法。具体取决于你的Element UI版本和实现细节。通常，使用`this.$nextTick()`是最简单的方法来确保DOM更新完成。例如：this.$nextTick(() => { /* 你的代码 */ });
    },
    handleClickelpop(index) {
      // this.popovers = this.popovers.map((val, i) => i === index); // 只激活当前索引的 popover，其余
      // console.log(this.popovers)
      // // this.$nextTick(() => {
      // // 	this.$refs.popover[index].doShowPopper = true; // 手动控制显示
      // // });
      // this.$refs[`popover-${index}`][index].doShow(); // 使用doShow方法显示popover，注意这里的[0]是因为el-popover实际上是一个数组，即使只有一个元素。
      // this.popovers = this.popovers.map((val, i) => i === index ? !val : false);
      // this.$nextTick(() => {
      // 	this.$refs.popover[index].doShowPopper = true; // 手动控制显示
      // });
      // this.$refs.popover[index].doShowPopper = true;
      if (this.activeIndex === index) {
        this.$refs[`popover-${index}`][index].doClose(); // 关闭当前激活的 popover
        this.activeIndex = null; // 重置激活索引
      } else {
        this.activeIndex = index; // 设置当前激活的 popover 索引
        let parms = this.items;
        for (let i in parms) {
          this.$refs[`popover-${i}`][i].doClose(); // 关闭当前激活的 popover
        }
        this.$refs[`popover-${index}`][index].doShow(); // 打开新的 popover
      }
    },
    getindex(index) {
      let list = this.list;
      list[index].iszhe = !list[index].iszhe;
      this.list = list;
    },
    getdown() {
      const videoUrl = this.vitem.videoUrl; // 请替换为实际的视频 URL
      const newWindow = window.open(videoUrl, '_blank');
      if (newWindow) {
        // 有些浏览器可能会拦截弹出窗口，这里可以做一些处理
        newWindow.focus();
      } else {
        this.$message({
          type: 'error',
          message: this.$t('message.lang31'),
        });
      }
    },
  },
};
</script>

<style scoped>
.web-container {
}

.page-containerstwo {
  height: calc(100vh - 54px);
  width: 100%;
  display: flex;
  flex-direction: row;
  background: #0a0b0d;
}

.rightview {
  flex: 1;
  height: 100%;
  position: relative;
  display: flex;
}

.center-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}

.center-col {
  position: relative;
  display: flex;
  flex-direction: column;
}

.newleft {
  height: 100%;
  /* width: 300px; */
  display: flex;
  position: relative;
  flex-direction: row;
  align-items: center;
  transition: width 0.4s ease;
}

.leftview {
  height: 100%;
  background-color: #1c1d24;
  width: 100%;
  display: flex;
  position: relative;
  flex-direction: column;
  overflow-y: scroll;
}

.pone {
  height: 75px;
  background: #30323b;
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 0 23px;
  width: 100%;
  cursor: pointer;
  position: relative;
}

.pzhan {
  height: 60px;
  background: #23242a;
  padding: 0 27px;
  display: flex;
  flex-direction: row;
  align-items: center;
  cursor: pointer;
}

.dian {
  display: inline-block;
  width: 8px;
  height: 8px;
  background: #0199e8;
  border-radius: 50%;
  border: 1px solid #c2c2c2;
  margin-right: 10px;
}

.icon_gd {
  width: 18px;
  height: 18px;
  margin-left: auto;
  cursor: pointer;
}

.zhanname {
  max-width: 85%;
  font-weight: 400;
  font-size: 14px;
  color: #999999;
}

.icon_ps {
  width: 24px;
  height: 24px;
  margin-right: 2px;
}

.txt {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.painame {
  font-weight: 400;
  font-size: 14px;
  color: #ffffff;
}

.rpai {
  margin-left: auto;
  display: flex;
  flex-direction: row;
  align-items: center;
}

.icon_px {
  margin-left: 8px;
  width: 18px;
  height: 18px;
}

.rnav {
  width: 450px;
  margin: 0 30px;
}

.img_pt {
  width: 100%;
  height: 338px;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
  margin-top: 20px;
}
.navbot {
  padding: 23px 45px;
  background: #272830;
  border-radius: 0px 0px 15px 15px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.ptit {
  font-weight: 500;
  font-size: 18px;
  color: #eeeeee;
}

.pmiao {
  font-weight: 400;
  font-size: 12px;
  color: #999999;
  display: block;
  text-align: center;
}

.chuanbtn {
  width: 225px;
  height: 50px;
  background: #0199e8;
  border-radius: 8px;
  margin-top: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 400;
  font-size: 14px;
  color: #ffffff;
  cursor: pointer;
}

.ritems {
  display: flex;
  flex-direction: row;
}

/* 拍摄弹窗样式开始 */
.popcj {
  display: flex;
  flex-direction: row;
  margin-bottom: 24px;
  align-items: center;
}

.fang {
  color: #333;
  font-size: 14px;
  white-space: nowrap;
  display: inline-block;
  margin-right: 5px;
}

.popright {
  display: flex;
  margin-left: auto;
  flex-direction: row;
}

.huishe {
  color: #409eff;
  cursor: pointer;
}

.chamiao {
  color: #666;
  font-size: 13px;
  font-weight: normal;
  display: block;
  margin-bottom: 10px;
}

.chams {
  color: #333;
  font-size: 14px;
  font-weight: normal;
  display: block;
  margin-bottom: 12px;
}

.qitem {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-bottom: 12px;
}

.qitem:last-child {
  margin-bottom: 0;
}

.quan {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #666;
  margin-right: 6px;
}

.pyi {
  position: relative;
  margin-left: 6px;
  top: 1px;
}

.chuan {
  display: flex;
  flex-direction: row;
  width: 100%;
  justify-content: space-between;
  margin-bottom: 50px;
}

.chuanleft {
  width: 46%;
  display: flex;
  flex-direction: column;
}

.chuanleft .el-upload-dragger {
  width: 100%;
}

/* 拍摄样式结束 */

.xmwj {
  height: 36px;
  background: #1c1d24;
  padding: 0 14px;
  display: flex;
  flex-direction: row;
  align-items: center;
  border-top: 1px solid #30323b;
  border-bottom: 1px solid #30323b;
}

.xname {
  font-weight: 400;
  font-size: 14px;
  color: #ffffff;
}

.shu {
  width: 1px;
  height: 14px;
  background: #9094a6;
  display: inline-block;
  margin: 0 14px;
}

.hui {
  font-weight: 400;
  font-size: 14px;
  color: #9094a6;
}

.xmright {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-left: auto;
}

.icon_yq {
  width: 23px;
  height: 23px;
  margin-right: 8px;
}

.icon_zk_zhan {
  width: 18px;
  height: 18px;
  margin-left: 20px;
}

.ren {
  display: flex;
  flex-direction: row;
}

.renitems {
  /* width: 22px;
  height: 22px; */
  background: rgba(115, 48, 255, 1);
  /* background: #25262E; */
  border-radius: 50%;
  border: 1px solid #666666;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 400;
  font-size: 12px;
  color: #ffffff;
  min-width: 22px;
  padding: 2px 4px;
  position: relative;
  margin-left: -4px;
}

.schaun {
  width: 105px;
  height: 27px;
  background: #0199e8;
  border-radius: 5px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  font-weight: 400;
  font-size: 12px;
  color: #ffffff;
  margin-left: 40px;
  cursor: pointer;
}

.wenview {
  display: flex;
  flex-direction: column;
  padding: 20px 30px;
  overflow-y: scroll;
  height: 100%;
}

.videoview {
  flex: 1;
  height: 100%;
  position: relative;
  max-width: 95%;
}

.wenitems {
  display: flex;
  flex-direction: column;
}

.wenhead {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-bottom: 20px;
}

.wenname {
  font-weight: 400;
  font-size: 14px;
  color: #9094a6;
}

.sjiao {
  width: 15px;
  height: 10px;
  transform: rotate(180deg);
  margin-left: 5px;
}

.wens {
  /* width: 133px;
  height: 114px; */
  position: relative;
  max-width: 180px;
  margin: 0 30px 30px 0;
  /* padding: 20px; */
  cursor: pointer;
}

.img_bj {
  position: absolute;
  width: 100%;
  height: 100%;
}

.wjhead {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 23px 10px 12px;
}

.wjleft {
  width: 65px;
  height: 55px;
  /* background: #1C1D24; */
  /* border-radius: 5px; */
  /* border: 1px solid #30323B; */
  position: relative;
}

.img_wjs {
  position: absolute;
  width: 100%;
  height: 100%;
}

.itemswj {
  position: relative;
  width: 100%;
  height: 100%;
  /* padding: 23px 10px 8px; */
}

.wenbot {
  /* background: #272830; */
  border-radius: 0px 0px 5px 5px;
  border-top: 1px solid #30323b;
  /* padding: 8px; */
  display: flex;
  flex-direction: row;
  align-items: center;
  margin: 3px 3px 0;
  padding: 8px;
}

.icon_gds {
  margin-left: auto;
  width: 14px;
  height: 14px;
}

.botleft {
  display: flex;
  flex-direction: column;
}

.img_sc {
  width: 36px;
  height: 28px;
  margin-left: 13px;
}

.botname {
  font-weight: 300;
  font-size: 10px;
  color: #ffffff;
}

.bottime {
  font-weight: 300;
  font-size: 10px;
  color: #9094a6;
  display: block;
  margin-top: 3px;
}

.wenjjia {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.paisheitem {
  background: rgba(28, 29, 36, 1);
  border-radius: 5px;
  padding: 11px 9px;
  display: flex;
  flex-direction: row;
  align-items: center;
  cursor: pointer;
}

.sheleft {
  width: 90px;
  height: 51px;
  position: relative;
}

.tuimg {
  position: absolute;
  width: 100%;
  height: 100%;
}

.good {
  background-color: rgba(0, 0, 0, 0.5);
  border-radius: 3px;
  padding: 2px 8px;
  position: absolute;
  margin: 5px;
  display: flex;
  flex-direction: row;
  align-items: center;
}

.xing {
  width: 5px;
  height: 5px;
  background: #0199e8;
  border-radius: 50%;
  display: inline-block;
  margin-right: 4px;
}

.goodname {
  font-weight: 400;
  font-size: 11px;
  color: #ffffff;
}

.sheright {
  /* flex: 1; */
  display: flex;
  flex-direction: column;
  width: 67%;
  padding-left: 10px;
  padding-top: 5px;
}

.shename {
  font-weight: 400;
  font-size: 12px;
  color: #ffffff;
}

.shiview {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-top: 8px;
}

.icon_sj {
  width: 11px;
  height: 11px;
  margin-right: 5px;
}

.times {
  font-weight: 400;
  font-size: 12px;
  color: #cccccc;
  line-height: 13px;
}

.qies {
  width: 15px;
  height: 56px;
  cursor: pointer;
  position: absolute;
  right: -15px;
  top: 45%;
  z-index: 100;
}

.qiesright {
  width: 15px;
  height: 56px;
  cursor: pointer;
  position: absolute;
  left: -15px;
  top: 45%;
  z-index: 100;
}

.rone {
  padding: 20px;
}

.pfen {
  display: flex;
  flex-direction: column;
  margin-top: 25px;
}

.plname {
  font-weight: 400;
  font-size: 14px;
  color: #ffffff;
  display: block;
  margin-bottom: 14px;
}

.pf {
  background: #272830;
  border-radius: 5px;
  border: 1px solid #30323b;
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 8px;
}

.fens {
  font-weight: 400;
  font-size: 14px;
  color: #9094a6;
}

.fshu {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-left: auto;
}

.xings {
  width: 24px;
  height: 24px;
  margin-left: 4px;
}

.cjitems {
  display: flex;
  flex-direction: row;
}

.cjiitems {
  width: 30%;
  height: 61px;
  background: #272830;
  border-radius: 5px;
  border: 1px solid #30323b;
  position: relative;
  margin-right: 3%;
}

.heng {
  width: 100%;
  height: 39px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 5px 5px 0 0;
  color: rgba(144, 148, 166, 1);
}

.cjian {
  position: relative;
  background: #1c1d24;
  border-radius: 0px 0px 5px 5px;
  border: 1px solid #30323b;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 400;
  font-size: 14px;
  color: #9094a6;
}

.tanfu {
  position: absolute;
  height: 300px;
  width: 300px;
  background-color: #fff;
}

.peihead {
  padding: 20px;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
}

.bqian {
  display: flex;
  flex-direction: row;
  align-items: center;
  cursor: pointer;
}

.biaotit {
  color: #fff;
  font-size: 14px;
  font-weight: normal;
}

.shang {
  width: 15px;
  height: 10px;
  margin-left: 5px;
}

.xuan {
  transform: rotate(180deg);
}

.gaishu {
  display: flex;
  flex-direction: column;
  padding: 20px 0;
  border-top: 1px solid rgba(48, 50, 59, 1);
  margin-top: 40px;
}

.gaiitem {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-bottom: 15px;
}

.gbiao {
  font-weight: 400;
  font-size: 14px;
  color: #ffffff;
  display: block;
  margin-bottom: 14px;
}

.gname {
  font-weight: 400;
  font-size: 14px;
  color: #9094a6;
}

.gnval {
  margin-left: auto;
  font-weight: 400;
  font-size: 14px;
  color: #ffffff;
}

.wenviewitems {
  flex: 1;
  width: 100%;
  height: 100%;
  position: relative;
}

.kong {
  flex: 1;
  width: 100%;
  height: 100%;
  position: relative;
}

.kongitem {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background: #272830;
}

.kongnav {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.live {
  height: 60px;
  position: relative;
}

.novideo {
  font-style: normal;
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  color: #c5c7d4;
  margin-top: 12px;
}
</style>

<style>
.chuanleft .el-upload-dragger {
  width: 100%;
}

.chuanleft .el-upload {
  width: 100%;
}

.rone .el-input__inner {
  background-color: #272830;
  border: 1px solid #272830;
  color: #fff;
}

.rone .el-textarea__inner {
  background-color: #272830;
  border: 1px solid #272830;
  color: #fff;
}
</style>
